import {PlIcon, PlTooltip} from "plain-design";
import React from "react";
import {designPage, onMounted, useRefs} from "plain-design-composition";
import {MicroLibService} from "@/micro/utils/MicroLibService";

export default designPage(() => {

    const {refs, onRef} = useRefs({chartEl: HTMLDivElement})

    const browserData = new Array(24).fill(0).map(i => Math.ceil(Math.random() * 7) + 3)
    const total = browserData.reduce((prev, item) => prev + item, 0)

    onMounted(async () => {
        const echarts = await MicroLibService.load.echarts()
        const ins = echarts.init(refs.chartEl!)

        ins.setOption({
            grid: {
                top: '0',
                left: '0',
                right: '0',
                bottom: '0',
            },
            xAxis: [
                {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                    data: new Array(24).fill(0).map(i => String(i))
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    show: false,
                    splitLine: {show: false},
                }
            ],
            series: [
                {
                    name: 'Line 3',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    lineStyle: {
                        width: 0
                    },
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: 'rgba(55, 162, 255)'},
                            {offset: 1, color: 'rgba(116, 21, 219)'}
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: browserData
                },
            ]
        })
    })

    return () => (
        <div className="pro-data-statistic-summary-card">
            <div className="pro-data-statistic-summary-card-title">
                <span>商品访问</span>
                <PlTooltip tooltip={'更多'}>
                    <PlIcon icon={'el-icon-menu'} status="primary"/>
                </PlTooltip>
            </div>
            <div className="pro-data-statistic-summary-card-result">
                7,555
            </div>
            <div ref={onRef.chartEl} className="pro-data-statistic-chart-el"/>
            <div className="pro-data-statistic-summary">
                <span>日访问量：</span>
                <span>{total}</span>
            </div>
        </div>
    )
})